<template>
	<div class="sysmenu" v-moveout="hideMenu">
	<div class="sysmenu-name" @mouseenter="showMenu" @mouseleave="show=0">
		<slot></slot>
	</div>
	<div id="sysmenudiv" ref="sysmenudiv" class="drop-menu-items" @mouseenter="show=1"
       :class="{'drop-menu-open':show==1,'drop-menu-close':show==0}" :style="'width:'+sysMenuWidth+'px;'" >
		<div class="sysmenu-search">
			<i slot="prefix" class="el-input__icon el-icon-search" @click="searchfuncs"></i>
			<input v-model="params.name" placeholder="通过名称查找"  @keyup.enter="searchfuncs" class="inputclass"></input>
			<!--<el-input v-model="params.name" placeholder="通过名称查找" @change="searchfuncs"></el-input>-->
		</div>
		<div class="sysmenu-list">
			<div class="sysmenu-list-content" v-for="(colum,cindex) in Array.from(colums)">
				<div v-for="(row,rindex) in Array.from(colum.colum)">
					<div class="sysmenu-list-title" :style="'width:'+itemWidth+'px;height:'+itemHeight*2+'px;'">
						<div class="sysmenu-list-title-style">
							<i class="el-icon-monitor sysmenu-list-title-icon"></i>
							{{row.packName}}
						</div>
					</div>
					<div class="sysmenu-list-item" :style="'width:'+itemWidth+'px;height:'+itemHeight+'px;'"  v-for="(func,index) in row.funcList" @click="linkTo(func)">
						<div class="sysmenu-list-item-hover">
							<span>{{func.name| ellipsis}}</span>
							<i class="sysmenu-list-collect" :class="{'el-icon-star-on':func.star == 1,'el-icon-star-off':func.star == 0}" @click.prevent.stop="collect(func)"></i>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div v-if="placement=='top'" v-show="show == 1" class="toparrow" ref='arrow' @mouseenter="show=1"></div>
		<div v-if="placement=='left'" v-show="show == 1" class="leftarrow" ref='arrow' @mouseenter="show=1"></div>
		<div v-if="placement=='right'" v-show="show == 1" class="rightarrow" ref='arrow' @mouseenter="show=1"></div>
		<div v-if="placement=='bottom'" v-show="show == 1" class="bottomarrow" ref='arrow' @mouseenter="show=1"></div>
	</div>
	</div>
</template>

<script>
import { collect, personalFuncs } from "@/system/api/sysApi";
import moveout from "@/directives/moveout.js";
export default {
  name: "sysmenuMemu", //下拉菜单
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 6) {
        return value.slice(0, 6) + "...";
      }
      return value;
    },
  },
  directives: { moveout },
  props: {
    placement: { default: "top" },
    arrowleft: {
      default: -10,
    },
  },
  watch: {},
  data() {
    return {
      show: -1,
      params: {
        name: null,
      },
      height: 0,
      itemWidth: 180,
      itemHeight: 28,
      menuleft: {
        default: 0,
      },
      sysMenuHeight: 0,
      sysMenuWidth: 0,
      colums: [],
      pushMenus: [],
      orderMenus: [],
      maxrows: 6,
      menuitems: [],
      etarget: null,
      scrollLeft: 0,
      count: 10,
    };
  },
  computed: {},
  methods: {
    hideMenu(e) {
      if (this.show == 1) {
        if (
          e.clientX > this.$refs.sysmenudiv.offsetLeft &&
          e.clientX < this.$refs.sysmenudiv.offsetLeft + this.sysMenuWidth &&
          e.clientY > this.$refs.sysmenudiv.offsetTop &&
          e.clientY < this.$refs.sysmenudiv.offsetTop + this.sysMenuHeight
        ) {
        } else {
          this.show = 0;
        }
      }
    },
    setMenuHeight() {
      let maxnum = this.maxrows;
      let menuNum = 0;
      this.menuitems.forEach((item, index) => {
        menuNum = menuNum + 2 + item.funcList.length;
        maxnum =
          maxnum > item.funcList.length + 2 ? maxnum : item.funcList.length + 2;
      });

      if (menuNum < 40) {
        this.maxrows = maxnum;
      } else if (menuNum < 70) {
        if (maxnum < 20) {
          this.maxrows = 20;
          maxnum = 20;
        } else {
          this.maxrows = maxnum;
        }
      } else if (menuNum < 100) {
        if (maxnum < 22) {
          this.maxrows = 22;
          maxnum = 22;
        } else {
          this.maxrows = maxnum;
        }
      } else {
        if (maxnum < 24) {
          this.maxrows = 24;
          maxnum = 24;
        } else {
          this.maxrows = maxnum;
        }
      }

      this.sysMenuHeight = this.itemHeight * maxnum + 75;

      this.$refs.sysmenudiv.style.setProperty(
        "--menu-height",
        this.sysMenuHeight + "px"
      );
      this.setOrderMenus();
    },
    setOrderMenus() {
      this.orderMenus = [];
      for (let i = this.maxrows; i > 0; i--) {
        this.menuitems.forEach((item, index) => {
          if (i == item.funcList.length) {
            this.orderMenus.push(item);
          }
        });
      }

      this.setWidth();
    },
    haspushed(menu) {
      let hased = false;
      this.pushMenus.forEach((item, index) => {
        if (item.packName == menu.packName) {
          hased = true;
        }
      });
      return hased;
    },
    setWidth() {
      this.colums = [];
      this.pushMenus = [];
      this.menuitems.forEach((item, index) => {
        if (!this.haspushed(item)) {
          let itemnum = 0;
          let $colum = { colum: [] };
          this.pushMenus.push(item);
          $colum.colum.push(item);
          itemnum = item.funcList.length + 2;
          this.orderMenus.forEach((itemord, index) => {
            if (!this.haspushed(itemord)) {
              if (itemnum + 2 + itemord.funcList.length <= this.maxrows) {
                this.pushMenus.push(itemord);
                $colum.colum.push(itemord);
                itemnum = itemnum + 2 + itemord.funcList.length;
              }
            }
          });
          this.colums.push($colum);
        }
      });
      if (this.sysMenuWidth < this.itemWidth * this.colums.length + 30) {
        this.sysMenuWidth = this.itemWidth * this.colums.length + 30;
      }

      if (this.sysMenuWidth == 30) {
        this.sysMenuWidth = this.itemWidth + this.sysMenuWidth;
      }
      this.menuleft = this.sysMenuWidth / 2;
    },
    itemclick(item, index) {
      this.show = 0;
      setTimeout(() => {
        this.$emit("dropitemclick", item, index);
        this.$emit("close", true);
      }, 300);
    },
    showMenu(e) {
      this.show = 1;
      //e.target.offsetLeft  target.offsetHeight
      this.scrollLeft = e.target.ownerDocument.childNodes[1].scrollLeft; //left滚动条
      this.etarget = e.target;
      this.$refs.sysmenudiv.style.top = this.$refs.sysmenudiv.offsetTop + "px";
      if (
        e.target.offsetLeft -
          this.scrollLeft +
          this.menuleft +
          (this.$refs.sysmenudiv.parentNode.offsetWidth -
            this.$refs.sysmenudiv.offsetWidth) <
        75
      ) {
        //顶住左边的收藏栏就不再往左移动
        this.$refs.sysmenudiv.style.left = "75px";
      } else {
        this.$refs.sysmenudiv.style.left =
          e.target.offsetLeft -
          this.scrollLeft +
          this.menuleft +
          (this.$refs.sysmenudiv.parentNode.offsetWidth -
            this.$refs.sysmenudiv.offsetWidth) +
          "px";
      }

      this.$refs.arrow.style.top = this.$refs.sysmenudiv.offsetTop - 10 + "px";
      this.$refs.arrow.style.left =
        e.target.offsetLeft -
        this.scrollLeft +
        this.arrowleft +
        parseInt(this.$refs.sysmenudiv.parentNode.offsetWidth / 2) +
        "px";
    },

    linkTo(func) {
      if (func.wmName == null) {
        this.message(func.name + "找不到路径,请刷新菜单!", 3);
        return;
      }
      const path = func.wmName;
      const name = "templatePage";
      const index = path.indexOf(name);
      let item
      if (index !== -1) {
        const id = path.substr(index + name.length + 1, path.length);
        const title = path.substr(index + 4 + name.length + 1);
        item = {
        	path: "/t" + id + "/:id",
            name: "t" + id,
            title: func.name,
            funcId: func.id
        }
      } else {
      	item = {
        	path: func.wmName,
            title: func.name,
            funcId: func.id
       	}
      }
	  this.linkClick(item)
    },
    collect(func) {
      let temp = 0;
      if (func.star == 0) {
        temp = 1;
      }

      collect({ funcId: func.id, state: temp,count: this.count }).then((res) => {
        if (res.success) {
          func.star = temp;
          this.message(res.msg, 1);
          this.$store.dispatch("refreshCollect", 1);
        } else {
          this.message(res.msg, 3);
        }
      });
    },
    mouseleave(e) {
      //				console.log(e.offsetX + '   ' +  e.offsetY)
      if (e.offsetX <= 0 || e.offsetX >= this.sysMenuWidth || e.offsetY <= 0) {
        if (e.offsetY <= 0) {
          if (
            e.clientX >= this.etarget.offsetLeft - this.scrollLeft &&
            e.clientX <=
              this.etarget.offsetWidth +
                this.etarget.offsetLeft -
                this.scrollLeft
          ) {
          } else {
            this.show = 0;
          }
        } else {
          this.show = 0;
        }
      } else {
        if (e.offsetY > 134) {
          this.show = 0;
        }
      }
    },
    getMenus() {
      personalFuncs(this.params).then((res) => {
        if (res.success) {
          this.menuitems = res.info;
          this.setMenuHeight();
        }
      });
    },
    searchfuncs() {
      this.getMenus();
    },
  },
  mounted() {
  	let  pcHeight = document.documentElement.clientHeight;
  	this.count = parseInt((pcHeight - 78)/48)
    this.getMenus();
  },
};
</script>

<style scoped>
.sysmenu {
  color: var(--head-sys-text-color);
}
.sysmenu-name {
  width: 50px;
}
#messagediv {
  --menu-height: 0px;
  --dot-margin-top: 0px;
}
.drop-menu-items {
  background: var(--page-back-color);
  color: var(--page-lable-text-color);
  box-shadow: 0px 10px 20px 0px var(--drop-menu-boxshadow-color),
    0px -10px 20px 0px var(--drop-menu-boxshadow-color);
  font-size: 14px;
  text-align: center;
  position: fixed;
  overflow: hidden;
  z-index: 100;
  height: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  opacity: 0.9;
  max-height: calc(100% - 78px);
}
.drop-menu-open {
  height: var(--menu-height);
  animation: menuopen 0.3s;
}
@keyframes menuopen {
  from {
    height: 0;
  }
  to {
    height: var(--menu-height);
  }
}
.drop-menu-close {
  height: 0;
  animation: menuclose 0.3s;
}
@keyframes menuclose {
  from {
    height: var(--menu-height);
  }
  to {
    height: 0;
  }
}
/*下拉菜单 搜索框样式*/
.sysmenu-search {
  width: calc(100% - 40px);
  line-height: 30px;
  display: flex;
  margin: 10px 20px;
  border: 1px solid var(--sys-menu-input-border-color);
  background: var(--sys-menu-input-back-color);
  color: var(--head-search-text-color);
  border-radius: 15px;
}
.sysmenu-search >>> .el-input__icon {
  margin-left: 10px;
  line-height: 30px;
}
.sysmenu-search >>> .el-input__inner {
  border: none;
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
  background: var(--sys-menu-input-back-color);
  color: var(--head-search-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
/*菜单明细的list  div 样式*/
.sysmenu-list {
  margin-left: 20px;
  display: flex;
  height: calc(100% - 52px);
  overflow: auto;
}
.sysmenu-list-title {
  line-height: 56px;
  padding-top: 18px;
  padding-left: 15px;
  padding-right: 30px;
}
.sysmenu-list-title-style {
  line-height: 28px;
  text-align: left;
  border-bottom: 1px solid var(--sys-menu-border-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sysmenu-list-title-icon {
  color: var(--icon-color);
}
.sysmenu-list-item {
  text-align: left;
  line-height: 28px;
  padding-right: 30px;
}
.sysmenu-list-item-hover {
  padding-left: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sysmenu-list-item-hover:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
.sysmenu-list-item-hover:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.sysmenu-list-collect {
  margin-left: 10px;
}
.iconbefore {
  margin-right: 10px;
  color: var(--icon-color);
}
.iconafter {
  margin-left: 10px;
  color: var(--icon-new-color);
}
.toparrow {
  position: fixed;
  border-style: solid;
  border-width: 0px 10px 10px 10px;
  border-color: transparent transparent var(--drop-menu-arrow-color) transparent;
  width: 0px;
  height: 0px;
}
.leftarrow {
  position: fixed;
  border-style: solid;
  border-width: 10px 10px 10px 0px;
  border-color: transparent var(--drop-menu-arrow-color) transparent transparent;
  width: 0px;
  height: 0px;
}
.rightarrow {
  position: fixed;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--drop-menu-arrow-color);
  width: 0px;
  height: 0px;
}
.bottomarrow {
  position: fixed;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: var(--drop-menu-arrow-color) transparent transparent transparent;
  width: 0px;
  height: 0px;
}

/*图标*/
.editicon {
  color: var(--icon-edit-color);
  margin-right: 13px;
}
.editicon:before {
  content: "\e6d2";
}

.delicon {
  color: var(--icon-xx-color);
  margin-right: 13px;
}
.delicon:before {
  content: "\e600";
}

.enableicon {
  color: var(--icon-save-color);
  margin-right: 13px;
}
.enableicon:before {
  content: "\e6d2";
}

.disableicon {
  color: var(--icon-edit-color);
  margin-right: 13px;
}
.disableicon:before {
  content: "\e6d2";
}
.drop-menu-item-icon {
  color: var(--icon-color);
  width: 38px;
  margin-left: 10px;
}
.inputclass {
  border: none;
  background: var(--sys-menu-input-back-color);
  width: calc(100% - 50px);
  height: 30px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--head-search-text-color: );
}
.inputclass:focus {
  outline: none;
}
</style>
